<template>
  <div class="wrap" v-move>
    <div class="header">标题</div>
    <div>内容</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, Directive, DirectiveBinding } from "vue";
const vMove: Directive = (el: HTMLElement, dir: DirectiveBinding) => {
  let moveElement: HTMLElement = el.firstElementChild as HTMLElement;
  console.log("moveElement", moveElement);
  const mouseDowm = (event: MouseEvent) => {
    let x = event.clientX - el.offsetLeft;
    let y = event.clientY - el.offsetTop;
    const move = (e: MouseEvent) => {
      console.log("MouseEvent", e);
      el.style.left = e.clientX - x + "px";
      el.style.top = e.clientY - y + "px";
    };
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove",move)
    });
  };
  moveElement.addEventListener("mousedown", mouseDowm);
};
</script>

<style scoped>
.wrap {
  width: 200px;
  height: 250px;
  border: 1px solid red;
  position: relative;
}
.header {
  width: 100%;
  background-color: black;
  margin: 0;
  color: white;
}
</style>